@import './global.scss';
@import './animate.scss';

body {
    font-family: sans-serif;
    background: #f5f5f9;
    font-size: 14px;
    font-weight: 200;
    padding: 0;
    margin: 0;
}
p, h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
}
input {
    outline: none;
}
ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}
.blue {
    color: #3e9bf7;
}
.red {
    color: #d95644;
}
.yell {
    color: #f6b53f;
}
.green {
    color: #18c4ba;
}
.bg-blue {
    background-color: #3e9bf7;
}
.bg-red {
    background-color: #d95644;
}
.bg-yell {
    background-color: #f6b53f;
}
.bg-green {
    background-color: #18c4ba;
}
.bg-white {
    background: white;
}
.theme_bg {
    background: $theme;
}
.white_bg {
    background: white;
}
.clearfix {
    zoom: 1;
    &:after {
        content: '';
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
    }
}
.ui-p-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.ui-translucent-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 9999;
    animation-duration: .3s;
    animation-name: bgFadeIn;
    animation-timing-function: ease;
}
.qr-page-content {
    width: 520/$rem;
    margin: 140/$rem auto 0;
    padding: 50/$rem;
    border-radius: 20/$rem;
    background: #fff;
    .ui-user-info {
        img {
            width: 100/$rem;
            height: 100/$rem;
            border-radius: 10/$rem;
            margin-right: 40/$rem;
        }
    }
    img.qr {
        width: 400/$rem;
        height: 400/$rem;
        padding: 80/$rem 60/$rem 60/$rem;
    }
    .qr-info {
        text-align: center;
        padding-bottom: 20/$rem;
    }
}
.ui-border-theme-t {
    position: relative;
    &:before {
        border-top: 1px solid $theme;
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: auto;
        width: 100%;
        display: block;
        z-index: 15;
        transform-origin: 100% 0;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
    }
}
.ui-border-b {
    position: relative;
    &:after {
        border-top: 1px solid $color_border;
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: auto;
        width: 100%;
        display: block;
        z-index: 15;
        transform-origin: 100% 40%;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
    }
}
.ui-border-tb {
    position: relative;
    &:before {
        border-top: 1px solid $color_border;
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: auto;
        width: 100%;
        display: block;
        z-index: 15;
        transform-origin: 100% 0;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
    }
    &:after {
        border-top: 1px solid $color_border;
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: auto;
        width: 100%;
        display: block;
        z-index: 15;
        transform-origin: 100% 40%;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
    }
}
.ui-border-t {
    position: relative;
    &:before {
        border-top: 1px solid $color_border;
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: auto;
        width: 100%;
        display: block;
        z-index: 15;
        transform-origin: 100% 0;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
    }
}
.ui-container {
    height: 100%;
    width: 100%;
    position: absolute;
    background: #f5f5f9;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    .ui-content {
        flex: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 50px;
        position: relative;
    }
    .ui-tool-bar {
        z-index: 80px;
        position: relative;
        font-size: 12px;
        color: #aaa;
        height: 50px;
        background: #fff;
        display: flex;
        .item {
            flex: 1;
            text-align: center;
            line-height: 1;
            .item-content {
                width: 50px;
                margin: auto;
                height: 100%;
            }
            .icon {
                font-size: 24px;
            }
            .i-icon {
                padding-top: 5px;
            }
            .i-text {
                padding-top: 2px;
            }
            .i-on {
                display: none;
            }
            .i-off {
                display: block;
            }
            &.on {
                color: $theme;
                .i-on {
                    display: block;
                }
                .i-off {
                    display: none;
                }
            }
        }
    }
}

.row-flex {
    display: flex;
    .flex-1 {
        flex: 1;
    }
}
.cube {
    position: relative;
    .cube-a{
        display: block;
        padding-top: 100%;
    }
    .cube-content {
        text-align: center;
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%)
    }
}
.index-toop-menus {
    background: $theme;
    color: #fff;
    .flex-1 {
        position: relative;
    }
    .icon {
        font-size: 35px;
    }
}
.service-item-group-title {
    background: #fff;
    padding-left: 20px;
    font-size: 16px;
    color: #999;
    padding-top: 15px;
}
.service-menu {
    background: #fff;
    .p2 {
        padding-top: 5px;
    }
    .icon {
        font-size: 28px;
    }
}

.forward-enter-active,
.forward-leave-active,
.back-enter-active,
.back-leave-active {
    animation-duration: 500ms;
    animation-timing-function: cubic-bezier(.36, .66, .04, 1);
}

// back
.back-enter-active {
    z-index: 2;
    transform: translateX(-50%);
}
.back-leave-active {
    z-index: 3;
    transform: translateX(0);
    box-shadow: 0 0 28px rgba(0,0,0,.5);
}

// forward
.forward-enter-active {
    z-index: 3;
    transform: translateX(100%);
    box-shadow: 0 0 28px rgba(0,0,0,.5);
}
.forward-leave-active {
    z-index: 2;
    transform: translateX(0);
}

.back-enter-to {
    animation-name: backInX;
}
.back-leave-to{
    animation-name: backOutX;
}

.forward-enter-to {
    animation-name: sflipInX;
}
.forward-leave-to{
    animation-name: sflipOutX;
}

.record-list {
    .record-item {
        margin-top: 10px;
        position: relative;
        background-color: #fff;
        img {
            display: block;
            width: 100%;
        }
        .com-title {
            position: absolute;
            box-sizing: border-box;
            left: 0;
            top: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            color: #8a8a8a;
            font-size: 12px;
            &.b {
                color: #fff;
            }
            .title-date {
                line-height: 1;
                background: url(../images/icon-day-earn.png) no-repeat 0;
                background-size: 30px 30px;
                height: 30px;
                padding-left: 40px;
                .p1 {
                    padding-top: 2px;
                }
                .p2 {
                    padding-top: 5px;
                }
            }
            .pay-record {
                background-image: url(../images/icon-business-record.png);
            }
            .message-tip {
                background-image: url(../images/icon-infor.png);
            }
            .operate-btn {
                display: inline-block;
                width: 30px;
                height: 30px;
                background: url(../images/icon-operate.png) no-repeat 100%;
                background-size: 20px;
            }
        }
        .sum-wrap {
            padding-top: 55px;
            padding-left: 50px;
            padding-bottom: 20px;
            font-size: 20px;
            font-weight: normal;
            color: #000;
            .sum-remark {
                font-size: 14px;
                font-weight: 200;
            }
        }
    }
}

.ui-top-bar {
    background: $theme;
    position: relative;
    .ck{
        padding-top: 25%;
    }
    .ui-top-content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        .ui-user-info {
            padding: 0 20px;
            img {
                border-radius: 50%;
                margin-right: 20px;
            }
        }
    }
}
.ui-user-info {
    display: flex;
    align-items: center;
    img {
        width: 60px;
        height: 60px;
    }
    .p1 {
        font-size: 18px;
        font-weight: normal;
    }
    .p2 {
        font-size: 12px;
    }
}
.cell-group {
    background: #fff;
    margin-bottom: 10px;
    .cell-item {
        padding: 13px 0;
        position: relative;
        .full-line {
            padding-left: 15px;
        }
    }
}
.ui-list {
    margin: 0;
    padding-left: 0;
    background: #fff;
    li {
        position: relative;
        display: flex;
        align-items: center;
        .ui-avatar {
            width: 50px;
            height: 50px;
            -webkit-border-radius: 200px;
            padding:0 10px 0 15px;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
                display: block;
                overflow: hidden;
                background-repeat: no-repeat;
                -webkit-background-size: cover;
                -webkit-border-radius: 200px;
                background: url(../images/icon-photo.png);
            }
        }
        .ui-list-info {
            flex: 1;
            padding-top: 15px;
            padding-bottom: 15px;
            font-size: 12px;
            color: #999;
            .ui-nowrap {
                font-size: 16px;
                font-weight: 400;
                color: #000;
            }
        }
        &:first-child .ui-border-t:before {
            border: none;
        }
    }
}
.list-button-msg {
    padding: 10px 0;
    text-align: center;
    color: #aaa;
}

.cards-list {
    background: #fff;
    margin-top: 10px;
    padding: 0 15px 15px;
    .card-group-title {
        font-size: 20px;
        font-weight: 400;
        padding: 15px 0 0;
    }
    .card-item {
        margin-top: 15px;
        background: #fafafa;
        height: 100px;
        border-radius: 10px 10px 0 0;
    }
    .ticket-item {
        margin-top: 15px;
        position: relative;
        &:before {
            content: '';
            bottom: 25px;
            right: -5px;
            width: 10px;
            height: 10px;
            background: #fff;
            transform: rotate(-45deg);
            border-left: 1px solid #eee;
            border-top: 1px solid #eee;
            position: absolute;
        }
        &:after {
            content: '';
            bottom: 25px;
            left: -5px;
            width: 10px;
            height: 10px;
            background: #fff;
            transform: rotate(-45deg);
            border-bottom: 1px solid #eee;
            border-right: 1px solid #eee;
            position: absolute;
        }
        .t-body {
            height: 70px;
            background: #fafafa;
            border-radius: 5px 5px 0 0;
            box-sizing: border-box;
            border: 1px solid #eee;
            border-bottom: 1px dashed #eee;
            display: flex;
            align-items: center;
            padding: 0 15px;
            .t-detail {
                display: flex;
                .ico {
                    width: 25px;
                    height: 25px;
                    text-align: center;
                    line-height: 25px;
                    text-decoration: none;
                    font-style: normal;
                    color: #fff;
                    border-radius: 50%;
                    font-size: 14px;
                    display: inline-block;
                    margin-right: 10px;
                }
                .ti {
                    font-size: 14px;
                    line-height: 25px;
                }
                .co {
                    font-size: 16px;
                    line-height: 25px;
                }
            }
        }
        .t-foot {
            height: 30px;
            background: #fafafa;
            border-radius: 0 0 5px 5px;
            box-sizing: border-box;
            border: 1px solid #eee;
            border-top: none;
            font-size: 12px;
            .l {
                line-height: 30px;
                padding-left: 15px;
                color: #aaa;
            }
        }
    }
}
.payment-details {
    background: #fff;
    .account-balance {
        padding: 30px 15px 20px;
        h2 {
            font-size: 16px;
            line-height: 20px;
            font-weight: 400;
            background: url(../images/user-account.png) no-repeat left center;
            background-size: 20px;
            padding-left: 25px;
        }
        .bal-insert {
            margin-top: 4px;
            font-size: 24px;
            font-weight: 400;
        }
    }
    .details-msg-group {
        padding: 7px 15px;
        color: #949494;
        font-size: 14px;
        .msg {
            display: flex;
            justify-content: space-between;
            span {
                padding: 7px 0;
            }
            .ti {
                width: 120px;
            }
            .co {
                text-align: right;
            }
        }
    }
}

.state-container {
    .success-co {
        padding: 40px 0 0;
        height: 260px;
        text-align: center;
        box-sizing: border-box;
        .icon {
            font-size: 80px;
        }
        .state {
            font-size: 18px;
        }
        .msg {
            font-size: 14px;
            color: #aaa;
        }
        .info {
            font-size: 30px;
            font-weight: 400;
            margin-top: 20px;
            line-height: 1;
        }
    }
}

.money-page {
    .ui-top-content {
        padding: 0 15px;
        .p1 {
            color: rgba(255, 255, 255, .7);
        }
        .p2 {
            margin-top: 10px;
            line-height: 1;
            font-weight: 100;
            font-size: 28px;
            &::before {
                content: '￥';
                font-size: 14px;
            }
        }
    }
}
.ui-actionsheet-cnt {
    &.order-confirm {
        background-color: #fff;
        .confirm-head {
            height: 44px;
            line-height: 44px;
            position: relative;
            .confirm-title {
                font-size: 16px;
                text-align: center;
            }
            .btn-close {
                padding: 0 15px;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
        .confirm-body {
            min-height: 270px;
            box-sizing: border-box;
            // font-weight: normal;
            .big-line {
                font-size: 40px;
                text-align: center;
                padding: 20px 0;
                font-weight: normal;
                &::before {
                    content: '￥';
                    font-size: 18px;
                }
            }
            .info-line {
                font-size: 16px;
                padding: 12px 15px;
                display: flex;
                justify-content: space-between;
                .ti {
                    color: #999;
                }
            }
        }
        .confirm-foot {}
    }
}
.chat-bar {
    border-top: 1px solid #ddd;
    height: 50px;
    background-color: #fff;
    display: flex;
    padding: 0 4px;
    .icon {
        border: 1px solid #ddd;
        box-sizing: border-box;
        width: 34px;
        height: 34px;
        border-radius: 50%;
    }
    .left {
        padding: 8px 4px;
    }
    .right {
        padding: 8px 4px;
    }
    .center {
        padding: 8px 4px;
        flex: 1;
    }
    .input {
        border: 1px solid #ddd;
        box-sizing: border-box;
        height: 34px;
        border-radius: 5px;
    }
}
.chat-history {
    padding: 15px;
    li {
        display: flex;
        margin-bottom: 20px;
        .img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: $green;
        }
        .msg {
            flex: 1;
            span {
                display: inline-block;
                text-align: justify;
                position: relative;
                word-break: break-all;
                background: $green;
                color: #fff;
                border-radius: 5px;
                padding: 10px 15px;
                &:after {
                    content: '';
                    width: 10px;
                    height: 10px;
                    background: $green;
                    top: 10px;
                    position: absolute;
                    transform: rotate(-45deg);
                }
            }
        }
    }
    .l {
        margin-right: 50px;
        .msg {
            margin-left: 10px;
            span {
                &:after {
                    left: -5px;
                }
            }
        }
    }
    .r {
        margin-left: 50px;
        flex-direction: row-reverse;
        text-align: right;
        .msg {
            margin-right: 10px;
            span {
                &:after {
                    right: -5px;
                }
            }
        }
    }
}

.index-list {
    flex: 1;
    font-family: "microsoft yahei",Arial,SimHei,"Sans Serif";
    .index-list-box {}
    .index-list-index {
        text-align: center;
        width: 50px;
        position: fixed;
        right: 0;
        z-index: 9999;
        i {
            padding-left: 20px;
            width: 30px;
            margin: auto;
            font-style: normal;
            display: block;
            line-height: 18px;
            font-size: 12px;
            font-weight: normal;
        }
    }
    .index-list-alert {
        width: 160/$rem;
        height: 160/$rem;
        background: rgba(0, 0, 0, .2);
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 400/$rem;
        text-align: center;
        line-height: 160/$rem;
        font-size: 70/$rem;
        color: #fff;
        transform: translate(-50%);
    }
}


.wenzheng-container {
    padding: 0 20px;
    .wz-head {
        padding: 20px 0 10px;
        h2 {
            font-size: 18px;
            text-align: center;
        }
        p {
            padding-top: 5px;
            color: #aaa;
            text-align: center;
            font-size: 12px;
        }
    }
    .wz-body {
        color: #666;
        p {
            text-indent: 30px;
            text-align: justify;
            padding-bottom: 10px;
        }
    }
}


.recharge-page {
    .re-top {
        background: #fff;
        padding: 20px 15px;
        input {
            margin-top: 20px;
            font-size: 35px;
            font-weight: 600;
            display: block;
            width: 100%;
            padding: 0;
            margin: 0;
            margin-top: 10px;
            border: none;
        }
        p {
            color: #aaa;
        }
    }
    .vulue-list {
        padding: 8px;
        .value-item {
            width: 33.3333%;
            float: left;
            box-sizing: border-box;
            padding: 8px;
            .b {
                border: 1px solid $green;
                background: #fff;
                text-align: center;
                border-radius: 5px;
                padding: 10px 0;
                line-height: 1;
                color: $green;
                .p1 {
                    font-size: 28px;
                    font-weight: 400;
                    &:after {
                        content: '元';
                        font-weight: 100;
                        font-size: 12px;
                    }
                }
                .p2 {
                    font-size: 12px;
                    padding-top: 5px;
                    &:before {
                        content: '售价'
                    }
                    &:after {
                        content: '元'
                    }
                }
            }
            &.on {
                .b {
                    background: $green;
                    color: #fff;
                }
            }
        }
    }
}

.history-list {
    li {
        padding: 10px 15px;
        background: #fff;
        display: flex;
        align-items: center;
        .date {
            text-align: center;
            .p1 {
                font-size: 16px;
                font-weight: normal;
            }
            .p2 {
                color: #aaa;
            }
        }
        .icon {
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            margin: 0 10px;
        }
        .content {
            flex: 1;
            .p1 {
                font-weight: normal;
                font-size: 16px;
            }
            .p2 {
                font-size: 12px;
                color: #bbb;
            }
        }
    }
}
.userInfo-page {
    .uer-top {
        background: $green;
        padding: 100/$rem 0;
        color: #fff;
        .img {
            width: 140/$rem;
            height: 140/$rem;
            border-radius: 50%;
            background: #fff;
            display: block;
            margin: auto;
        }
        .nike {
            margin-top: 20/$rem;
            text-align: center;
            font-size: 14px;
            font-weight: normal;
        }
    }
}


.transfer-page {
    .transfer-top {
        background: #fff;
        padding: 40px 16px 0;
        p.t {
            font-size: 16px;
        }
        div.i {
            display: flex;
            padding: 16px 0;
            input {
                font-size: 48px;
                border: none;
                margin: 0;
                padding-left: 20px;
                box-sizing: border-box;
                width: 100%;
                background: url("") left center no-repeat;
                background-size: 14px;
            }
        }
        div.m {
            input {
                font-size: 14px;
                border: none;
                line-height: 50px;
            }
        }
    }
}

.am-edit-inpage {
        background: #fff;
        padding: 16px;
        width: 100%;
        box-sizing: border-box;
        font-size: 17px;
        color: #333
    }

    .am-edit-inpage .am-edit-input {
        padding: 13px 0;
        color: #333;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        background: linear-gradient(0,#ddd,#ddd 50%,transparent 50%) bottom right/100% 1px no-repeat
    }

    .am-edit-inpage .am-edit-input .am-icon-yuan {
        display: block;
        width: 14px;
        height: 58px;
        background: url("") center center no-repeat;
        background-size: 100% auto
    }

    .am-edit-inpage .am-edit-input input {
        display: block;
        text-align: left;
        -webkit-appearance: none;
        color: #333;
        padding: 0 0 0 6px;
        // height: 58px;
        border: 0;
        font-size: 48px;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        box-sizing: border-box;
        // line-height: 58px;
        font-weight: 500;
        width: 100%
    }

    .am-edit-inpage .am-edit-input .am-edit-clear,.am-edit-inpage .am-edit-tips .am-edit-clear {
        width: 18px
    }

    .am-edit-inpage .am-edit-tips {
        display: -webkit-box;
        display: -webkit-flex;
        color: #999;
        padding-top: 16px;
        line-height: 20px;
        font-size: 14px
    }

    .am-edit-inpage .am-edit-tips input {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        display: block;
        box-sizing: border-box;
        border: 0
    }
    .am-edit-value {
        &::input-placeholder {
            font-size: 14px;
            font-weight: 200;
            line-height: 58px;
            // padding-top: 20px;
        }
    }
